<template>
  <div class="bottomTool">
    <div class="selected">
      <checkedIcon class="icon" :ischecked="isSelected" @click.native="handleSelectAll(isSelected)"></checkedIcon>
      <div>全选</div>
    </div>
    <div class="count">总计{{totapPrice}}</div>
    <div class="paymen" @click="handleIsChoose">去计算</div>
    <toast ref="toast"></toast>
  </div>
</template>

<script>
  import checkedIcon from 'components/common/checkedIcon/checkedIcon'
  import {mapGetters,mapActions} from 'vuex'
  export default {
    data(){
      return {
       selected:true,

      }
    },
    created(){

    },
    methods:{
      ...mapActions(['selectAll']),
      handleSelectAll(params){
        this.selected = !params
       // 根据isSelected 操作是全选还是 全部选
        this.$store.dispatch('selectAll',this.selected)

      },
      handleIsChoose(){
        // 检测 cartList 选中状态是否都为空 是的话就弹窗提示
        const result = this.cartList.some(item=>{
          return item.isChecked !==false
        })
        if(!result){
          this.$refs.toast.message('请选择商品')
        }
       
      }
    },
    components:{
      checkedIcon
    },
    computed:{
      ...mapGetters(['totapPrice','isSelected','cartList'])
    }
  }
</script>

<style scoped>
  .bottomTool{
    position:fixed;
    bottom:50px;
    left:0;
    right: 0;
    height:30px;
    background-color:#eee;
    z-index: 999;
    display:flex;
    align-items:center;
    padding-left:15px;
  }
  .bottomTool .selected{
    display:flex;
    width:75px;
  }
  .icon{
    margin-right:15px;
  }
  .count{
    flex:1;
    font-size:16px;
    color:#333;
  }
  .paymen{
    width:100px;
    font-size:14px;
    line-height: 30px;
    text-align:center;
    background-color:#ff4500;
    color:#fff;
  }
</style>
